{% extends "admin/base.html" %}

{% block title %}API文档 - 地标和路径管理系统{% endblock %}

{% block extra_css %}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
<style>
    :root {
        --primary-color: #4e73df;
        --secondary-color: #858796;
        --success-color: #1cc88a;
        --info-color: #36b9cc;
        --warning-color: #f6c23e;
        --danger-color: #e74a3b;
        --light-color: #f8f9fc;
        --dark-color: #5a5c69;
    }

    * {
        font-family: 'Noto Sans SC', sans-serif;
    }

    .api-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 280px;
        overflow-y: auto;
        background-color: #fff;
        border-right: 1px solid #e3e6f0;
        z-index: 100;
        padding-top: 80px;
    }

    .api-content {
        margin-left: 280px;
        padding: 30px;
    }

    .method {
        display: inline-block;
        padding: 0.25rem 0.5rem;
        border-radius: 0.25rem;
        font-weight: 700;
        font-size: 0.75rem;
        margin-right: 0.5rem;
    }

    .method-get {
        background-color: var(--info-color);
        color: white;
    }

    .method-post {
        background-color: var(--success-color);
        color: white;
    }

    .method-put {
        background-color: var(--warning-color);
        color: white;
    }

    .method-delete {
        background-color: var(--danger-color);
        color: white;
    }

    .endpoint {
        font-family: 'Courier New', monospace;
        background-color: #f8f9fc;
        padding: 0.5rem;
        border-radius: 0.25rem;
        margin-bottom: 1rem;
    }

    .nav-link {
        color: var(--dark-color);
        padding: 0.5rem 1rem;
        border-radius: 0.25rem;
        margin-bottom: 0.25rem;
    }

    .nav-link:hover {
        background-color: #f8f9fc;
    }

    .nav-link.active {
        background-color: var(--primary-color);
        color: white;
    }

    .nav-link i {
        margin-right: 0.5rem;
    }

    .card {
        border: none;
        border-radius: 0.35rem;
        box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
        margin-bottom: 1.5rem;
    }

    .card-header {
        background-color: #f8f9fc;
        border-bottom: 1px solid #e3e6f0;
        font-weight: 700;
        color: var(--primary-color);
    }

    .code-block {
        background-color: #f8f9fc;
        border: 1px solid #e3e6f0;
        border-radius: 0.35rem;
        padding: 1rem;
        font-family: 'Courier New', monospace;
        overflow-x: auto;
    }

    .json-key {
        color: var(--primary-color);
    }

    .json-string {
        color: var(--success-color);
    }

    .json-number {
        color: var(--info-color);
    }

    .json-boolean {
        color: var(--warning-color);
    }

    .json-null {
        color: var(--secondary-color);
    }

    .parameter-table {
        margin-bottom: 0;
    }

    .parameter-table th {
        border-top: none;
        font-weight: 600;
        color: var(--primary-color);
    }

    @media (max-width: 768px) {
        .api-sidebar {
            width: 0;
            overflow: hidden;
        }

        .api-sidebar.show {
            width: 280px;
        }

        .api-content {
            margin-left: 0;
        }

        .mobile-menu-btn {
            display: block !important;
        }
    }

    .mobile-menu-btn {
        display: none;
        position: fixed;
        top: 20px;
        left: 20px;
        z-index: 101;
    }

    .api-section {
        scroll-margin-top: 80px;
    }
</style>
{% endblock %}

{% block content %}
<button class="btn btn-primary mobile-menu-btn" id="mobile-menu-btn">
    <i class="bi bi-list"></i>
</button>

<div class="api-sidebar" id="api-sidebar">
    <div class="px-3">
        <h6 class="text-uppercase text-muted mb-3">概述</h6>
        <nav class="nav flex-column mb-4">
            <a class="nav-link active" href="#introduction">
                <i class="bi bi-info-circle"></i> 简介
            </a>
            <a class="nav-link" href="#authentication">
                <i class="bi bi-shield-lock"></i> 认证
            </a>
            <a class="nav-link" href="#errors">
                <i class="bi bi-exclamation-triangle"></i> 错误处理
            </a>
        </nav>

        <h6 class="text-uppercase text-muted mb-3">地标接口</h6>
        <nav class="nav flex-column mb-4">
            <a class="nav-link" href="#get-landmarks">
                <i class="bi bi-list-ul"></i> 获取所有地标
            </a>
            <a class="nav-link" href="#get-landmark">
                <i class="bi bi-search"></i> 获取指定地标
            </a>
            <a class="nav-link" href="#create-landmark">
                <i class="bi bi-plus-circle"></i> 创建地标
            </a>
            <a class="nav-link" href="#update-landmark">
                <i class="bi bi-pencil"></i> 更新地标
            </a>
            <a class="nav-link" href="#delete-landmark">
                <i class="bi bi-trash"></i> 删除地标
            </a>
        </nav>

        <h6 class="text-uppercase text-muted mb-3">路径接口</h6>
        <nav class="nav flex-column mb-4">
            <a class="nav-link" href="#get-routes">
                <i class="bi bi-list-ul"></i> 获取所有路径
            </a>
            <a class="nav-link" href="#get-route">
                <i class="bi bi-search"></i> 获取指定路径
            </a>
            <a class="nav-link" href="#get-route-details">
                <i class="bi bi-card-list"></i> 获取路径详情
            </a>
            <a class="nav-link" href="#create-route">
                <i class="bi bi-plus-circle"></i> 创建路径
            </a>
            <a class="nav-link" href="#update-route">
                <i class="bi bi-pencil"></i> 更新路径
            </a>
            <a class="nav-link" href="#delete-route">
                <i class="bi bi-trash"></i> 删除路径
            </a>
        </nav>

        <h6 class="text-uppercase text-muted mb-3">文件接口</h6>
        <nav class="nav flex-column">
            <a class="nav-link" href="#upload-file">
                <i class="bi bi-cloud-upload"></i> 上传文件
            </a>
            <a class="nav-link" href="#static-files">
                <i class="bi bi-image"></i> 静态文件访问
            </a>
        </nav>
    </div>
</div>

<div class="api-content">
    <div class="mb-4">
        <h1 class="mb-3">地标和路径管理系统 API 文档</h1>
        <p class="lead">本文档描述了地标和路径管理系统的RESTful API接口，包括地标管理、路径管理和文件上传等功能。</p>
    </div>

    <!-- 简介 -->
    <div class="card mb-4 api-section" id="introduction">
        <div class="card-header">
            <h5 class="mb-0">简介</h5>
        </div>
        <div class="card-body">
            <p>地标和路径管理系统API提供了一套完整的RESTful接口，用于管理校园历史文化地标和路径数据。API基于FastAPI框架开发，支持自动文档生成和数据验证。</p>

            <h6 class="mt-4">基础信息</h6>
            <ul>
                <li><strong>基础URL</strong>: <code>http://localhost:8000/api</code></li>
                <li><strong>数据格式</strong>: JSON</li>
                <li><strong>字符编码</strong>: UTF-8</li>
            </ul>

            <h6 class="mt-4">数据模型</h6>
            <div class="row">
                <div class="col-md-6">
                    <h6>地标 (Landmark)</h6>
                    <div class="code-block">
{
  <span class="json-key">"id"</span>: <span class="json-number">2</span>,
  <span class="json-key">"name"</span>: <span class="json-string">"图书馆"</span>,
  <span class="json-key">"lat"</span>: <span class="json-number">39.9052</span>,
  <span class="json-key">"lng"</span>: <span class="json-number">116.4075</span>,
  <span class="json-key">"summary"</span>: <span class="json-string">"藏书丰富"</span>,
  <span class="json-key">"details"</span>: <span class="json-string">"校史资料在这里收藏"</span>,
  <span class="json-key">"media"</span>: [
    <span class="json-string">"static/media/library.jpg"</span>
  ]
}
                    </div>
                </div>
                <div class="col-md-6">
                    <h6>路径 (Route)</h6>
                    <div class="code-block">
{
  <span class="json-key">"id"</span>: <span class="json-number">1</span>,
  <span class="json-key">"name"</span>: <span class="json-string">"文化之旅"</span>,
  <span class="json-key">"landmarks"</span>: [
    <span class="json-number">1</span>,
    <span class="json-number">2</span>,
    <span class="json-number">3</span>
  ]
}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 认证 -->
    <div class="card mb-4 api-section" id="authentication">
        <div class="card-header">
            <h5 class="mb-0">认证</h5>
        </div>
        <div class="card-body">
            <p>API使用基于JWT（JSON Web Token）的认证机制。所有API请求（除了获取令牌的接口）都需要在请求头中包含有效的访问令牌。</p>

            <h6 class="mt-4">获取访问令牌</h6>
            <div class="d-flex align-items-center mb-3">
                <span class="method method-post">POST</span>
                <div class="endpoint">/token</div>
            </div>

            <h6>请求体</h6>
            <p>application/x-www-form-urlencoded格式，包含以下字段：</p>
            <table class="table parameter-table">
                <thead>
                    <tr>
                        <th>参数名</th>
                        <th>类型</th>
                        <th>必需</th>
                        <th>描述</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>username</td>
                        <td>字符串</td>
                        <td>是</td>
                        <td>用户名</td>
                    </tr>
                    <tr>
                        <td>password</td>
                        <td>字符串</td>
                        <td>是</td>
                        <td>密码</td>
                    </tr>
                </tbody>
            </table>

            <h6>响应</h6>
            <div class="code-block">
{
  <span class="json-key">"access_token"</span>: <span class="json-string">"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."</span>,
  <span class="json-key">"token_type"</span>: <span class="json-string">"bearer"</span>
}
            </div>

            <h6 class="mt-4">使用访问令牌</h6>
            <p>在API请求的Authorization头中添加Bearer令牌：</p>
            <div class="code-block">
Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...
            </div>
        </div>
    </div>

    <!-- 错误处理 -->
    <div class="card mb-4 api-section" id="errors">
        <div class="card-header">
            <h5 class="mb-0">错误处理</h5>
        </div>
        <div class="card-body">
            <p>API使用标准的HTTP状态码来表示请求的成功或失败。以下是常见的状态码：</p>

            <table class="table">
                <thead>
                    <tr>
                        <th>状态码</th>
                        <th>含义</th>
                        <th>描述</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><code>200 OK</code></td>
                        <td>成功</td>
                        <td>请求成功处理</td>
                    </tr>
                    <tr>
                        <td><code>201 Created</code></td>
                        <td>创建成功</td>
                        <td>资源创建成功</td>
                    </tr>
                    <tr>
                        <td><code>400 Bad Request</code></td>
                        <td>错误请求</td>
                        <td>请求参数错误或格式不正确</td>
                    </tr>
                    <tr>
                        <td><code>404 Not Found</code></td>
                        <td>未找到</td>
                        <td>请求的资源不存在</td>
                    </tr>
                    <tr>
                        <td><code>422 Unprocessable Entity</code></td>
                        <td>验证错误</td>
                        <td>请求数据验证失败</td>
                    </tr>
                    <tr>
                        <td><code>500 Internal Server Error</code></td>
                        <td>服务器错误</td>
                        <td>服务器内部错误</td>
                    </tr>
                </tbody>
            </table>

            <h6 class="mt-4">错误响应格式</h6>
            <div class="code-block">
{
  <span class="json-key">"detail"</span>: <span class="json-string">"错误信息"</span>
}
            </div>
        </div>
    </div>

    <!-- 地标接口 -->
    <div class="card mb-4 api-section" id="get-landmarks">
        <div class="card-header">
            <h5 class="mb-0">获取所有地标</h5>
        </div>
        <div class="card-body">
            <div class="d-flex align-items-center mb-3">
                <span class="method method-get">GET</span>
                <div class="endpoint">/api/landmarks</div>
            </div>

            <h6>描述</h6>
            <p>获取系统中所有的地标列表。</p>

            <h6>响应</h6>
            <div class="code-block">
[
  {
    <span class="json-key">"id"</span>: <span class="json-number">1</span>,
    <span class="json-key">"name"</span>: <span class="json-string">"图书馆"</span>,
    <span class="json-key">"lat"</span>: <span class="json-number">39.9052</span>,
    <span class="json-key">"lng"</span>: <span class="json-number">116.4075</span>,
    <span class="json-key">"summary"</span>: <span class="json-string">"藏书丰富"</span>,
    <span class="json-key">"details"</span>: <span class="json-string">"校史资料在这里收藏"</span>,
    <span class="json-key">"media"</span>: [
      <span class="json-string">"static/media/library.jpg"</span>
    ]
  },
  {
    <span class="json-key">"id"</span>: <span class="json-number">2</span>,
    <span class="json-key">"name"</span>: <span class="json-string">"校史馆"</span>,
    <span class="json-key">"lat"</span>: <span class="json-number">39.9062</span>,
    <span class="json-key">"lng"</span>: <span class="json-number">116.4085</span>,
    <span class="json-key">"summary"</span>: <span class="json-string">"学校历史"</span>,
    <span class="json-key">"details"</span>: <span class="json-string">"展示学校发展历程"</span>,
    <span class="json-key">"media"</span>: [
      <span class="json-string">"static/media/history.jpg"</span>
    ]
  }
]
            </div>
        </div>
    </div>

    <div class="card mb-4 api-section" id="get-landmark">
        <div class="card-header">
            <h5 class="mb-0">获取指定地标</h5>
        </div>
        <div class="card-body">
            <div class="d-flex align-items-center mb-3">
                <span class="method method-get">GET</span>
                <div class="endpoint">/api/landmarks/{id}</div>
            </div>

            <h6>描述</h6>
            <p>根据ID获取指定的地标信息。</p>

            <h6>参数</h6>
            <table class="table parameter-table">
                <thead>
                    <tr>
                        <th>参数名</th>
                        <th>位置</th>
                        <th>类型</th>
                        <th>必需</th>
                        <th>描述</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>id</td>
                        <td>路径</td>
                        <td>整数</td>
                        <td>是</td>
                        <td>地标ID</td>
                    </tr>
                </tbody>
            </table>

            <h6>响应</h6>
            <div class="code-block">
{
  <span class="json-key">"id"</span>: <span class="json-number">1</span>,
  <span class="json-key">"name"</span>: <span class="json-string">"图书馆"</span>,
  <span class="json-key">"lat"</span>: <span class="json-number">39.9052</span>,
  <span class="json-key">"lng"</span>: <span class="json-number">116.4075</span>,
  <span class="json-key">"summary"</span>: <span class="json-string">"藏书丰富"</span>,
  <span class="json-key">"details"</span>: <span class="json-string">"校史资料在这里收藏"</span>,
  <span class="json-key">"media"</span>: [
    <span class="json-string">"static/media/library.jpg"</span>
  ]
}
            </div>
        </div>
    </div>

    <div class="card mb-4 api-section" id="create-landmark">
        <div class="card-header">
            <h5 class="mb-0">创建地标</h5>
        </div>
        <div class="card-body">
            <div class="d-flex align-items-center mb-3">
                <span class="method method-post">POST</span>
                <div class="endpoint">/api/landmarks</div>
            </div>

            <h6>描述</h6>
            <p>创建一个新的地标。</p>

            <h6>请求体</h6>
            <div class="code-block">
{
  <span class="json-key">"name"</span>: <span class="json-string">"图书馆"</span>,
  <span class="json-key">"lat"</span>: <span class="json-number">39.9052</span>,
  <span class="json-key">"lng"</span>: <span class="json-number">116.4075</span>,
  <span class="json-key">"summary"</span>: <span class="json-string">"藏书丰富"</span>,
  <span class="json-key">"details"</span>: <span class="json-string">"校史资料在这里收藏"</span>,
  <span class="json-key">"media"</span>: [
    <span class="json-string">"static/media/library.jpg"</span>
  ]
}
            </div>

            <h6>响应</h6>
            <div class="code-block">
{
  <span class="json-key">"id"</span>: <span class="json-number">1</span>,
  <span class="json-key">"name"</span>: <span class="json-string">"图书馆"</span>,
  <span class="json-key">"lat"</span>: <span class="json-number">39.9052</span>,
  <span class="json-key">"lng"</span>: <span class="json-number">116.4075</span>,
  <span class="json-key">"summary"</span>: <span class="json-string">"藏书丰富"</span>,
  <span class="json-key">"details"</span>: <span class="json-string">"校史资料在这里收藏"</span>,
  <span class="json-key">"media"</span>: [
    <span class="json-string">"static/media/library.jpg"</span>
  ]
}
            </div>
        </div>
    </div>

    <div class="card mb-4 api-section" id="update-landmark">
        <div class="card-header">
            <h5 class="mb-0">更新地标</h5>
        </div>
        <div class="card-body">
            <div class="d-flex align-items-center mb-3">
                <span class="method method-put">PUT</span>
                <div class="endpoint">/api/landmarks/{id}</div>
            </div>

            <h6>描述</h6>
            <p>更新指定的地标信息。</p>

            <h6>参数</h6>
            <table class="table parameter-table">
                <thead>
                    <tr>
                        <th>参数名</th>
                        <th>位置</th>
                        <th>类型</th>
                        <th>必需</th>
                        <th>描述</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>id</td>
                        <td>路径</td>
                        <td>整数</td>
                        <td>是</td>
                        <td>地标ID</td>
                    </tr>
                </tbody>
            </table>

            <h6>请求体</h6>
            <div class="code-block">
{
  <span class="json-key">"name"</span>: <span class="json-string">"图书馆（更新）"</span>,
  <span class="json-key">"lat"</span>: <span class="json-number">39.9052</span>,
  <span class="json-key">"lng"</span>: <span class="json-number">116.4075</span>,
  <span class="json-key">"summary"</span>: <span class="json-string">"藏书丰富"</span>,
  <span class="json-key">"details"</span>: <span class="json-string">"校史资料在这里收藏"</span>,
  <span class="json-key">"media"</span>: [
    <span class="json-string">"static/media/library.jpg"</span>
  ]
}
            </div>

            <h6>响应</h6>
            <div class="code-block">
{
  <span class="json-key">"id"</span>: <span class="json-number">1</span>,
  <span class="json-key">"name"</span>: <span class="json-string">"图书馆（更新）"</span>,
  <span class="json-key">"lat"</span>: <span class="json-number">39.9052</span>,
  <span class="json-key">"lng"</span>: <span class="json-number">116.4075</span>,
  <span class="json-key">"summary"</span>: <span class="json-string">"藏书丰富"</span>,
  <span class="json-key">"details"</span>: <span class="json-string">"校史资料在这里收藏"</span>,
  <span class="json-key">"media"</span>: [
    <span class="json-string">"static/media/library.jpg"</span>
  ]
}
            </div>
        </div>
    </div>

    <div class="card mb-4 api-section" id="delete-landmark">
        <div class="card-header">
            <h5 class="mb-0">删除地标</h5>
        </div>
        <div class="card-body">
            <div class="d-flex align-items-center mb-3">
                <span class="method method-delete">DELETE</span>
                <div class="endpoint">/api/landmarks/{id}</div>
            </div>

            <h6>描述</h6>
            <p>删除指定的地标。</p>

            <h6>参数</h6>
            <table class="table parameter-table">
                <thead>
                    <tr>
                        <th>参数名</th>
                        <th>位置</th>
                        <th>类型</th>
                        <th>必需</th>
                        <th>描述</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>id</td>
                        <td>路径</td>
                        <td>整数</td>
                        <td>是</td>
                        <td>地标ID</td>
                    </tr>
                </tbody>
            </table>

            <h6>响应</h6>
            <div class="code-block">
{
  <span class="json-key">"message"</span>: <span class="json-string">"地标已删除"</span>
}
            </div>
        </div>
    </div>

    <!-- 路径接口 -->
    <div class="card mb-4 api-section" id="get-routes">
        <div class="card-header">
            <h5 class="mb-0">获取所有路径</h5>
        </div>
        <div class="card-body">
            <div class="d-flex align-items-center mb-3">
                <span class="method method-get">GET</span>
                <div class="endpoint">/api/routes</div>
            </div>

            <h6>描述</h6>
            <p>获取系统中所有的路径列表。</p>

            <h6>响应</h6>
            <div class="code-block">
[
  {
    <span class="json-key">"id"</span>: <span class="json-number">1</span>,
    <span class="json-key">"name"</span>: <span class="json-string">"文化之旅"</span>,
    <span class="json-key">"landmarks"</span>: [
      <span class="json-number">1</span>,
      <span class="json-number">2</span>,
      <span class="json-number">3</span>
    ]
  },
  {
    <span class="json-key">"id"</span>: <span class="json-number">2</span>,
    <span class="json-key">"name"</span>: <span class="json-string">"历史探索"</span>,
    <span class="json-key">"landmarks"</span>: [
      <span class="json-number">2</span>,
      <span class="json-number">4</span>
    ]
  }
]
            </div>
        </div>
    </div>

    <div class="card mb-4 api-section" id="get-route">
        <div class="card-header">
            <h5 class="mb-0">获取指定路径</h5>
        </div>
        <div class="card-body">
            <div class="d-flex align-items-center mb-3">
                <span class="method method-get">GET</span>
                <div class="endpoint">/api/routes/{id}</div>
            </div>

            <h6>描述</h6>
            <p>根据ID获取指定的路径信息。</p>

            <h6>参数</h6>
            <table class="table parameter-table">
                <thead>
                    <tr>
                        <th>参数名</th>
                        <th>位置</th>
                        <th>类型</th>
                        <th>必需</th>
                        <th>描述</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>id</td>
                        <td>路径</td>
                        <td>整数</td>
                        <td>是</td>
                        <td>路径ID</td>
                    </tr>
                </tbody>
            </table>

            <h6>响应</h6>
            <div class="code-block">
{
  <span class="json-key">"id"</span>: <span class="json-number">1</span>,
  <span class="json-key">"name"</span>: <span class="json-string">"文化之旅"</span>,
  <span class="json-key">"landmarks"</span>: [
    <span class="json-number">1</span>,
    <span class="json-number">2</span>,
    <span class="json-number">3</span>
  ]
}
            </div>
        </div>
    </div>

    <div class="card mb-4 api-section" id="get-route-details">
        <div class="card-header">
            <h5 class="mb-0">获取路径详情</h5>
        </div>
        <div class="card-body">
            <div class="d-flex align-items-center mb-3">
                <span class="method method-get">GET</span>
                <div class="endpoint">/api/routes/{id}/details</div>
            </div>

            <h6>描述</h6>
            <p>根据ID获取指定的路径详细信息，包括地标详情。</p>

            <h6>参数</h6>
            <table class="table parameter-table">
                <thead>
                    <tr>
                        <th>参数名</th>
                        <th>位置</th>
                        <th>类型</th>
                        <th>必需</th>
                        <th>描述</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>id</td>
                        <td>路径</td>
                        <td>整数</td>
                        <td>是</td>
                        <td>路径ID</td>
                    </tr>
                </tbody>
            </table>

            <h6>响应</h6>
            <div class="code-block">
{
  <span class="json-key">"id"</span>: <span class="json-number">1</span>,
  <span class="json-key">"name"</span>: <span class="json-string">"文化之旅"</span>,
  <span class="json-key">"landmarks"</span>: [
    {
      <span class="json-key">"id"</span>: <span class="json-number">1</span>,
      <span class="json-key">"name"</span>: <span class="json-string">"图书馆"</span>,
      <span class="json-key">"lat"</span>: <span class="json-number">39.9052</span>,
      <span class="json-key">"lng"</span>: <span class="json-number">116.4075</span>,
      <span class="json-key">"summary"</span>: <span class="json-string">"藏书丰富"</span>,
      <span class="json-key">"details"</span>: <span class="json-string">"校史资料在这里收藏"</span>,
      <span class="json-key">"media"</span>: [
        <span class="json-string">"static/media/library.jpg"</span>
      ]
    },
    {
      <span class="json-key">"id"</span>: <span class="json-number">2</span>,
      <span class="json-key">"name"</span>: <span class="json-string">"校史馆"</span>,
      <span class="json-key">"lat"</span>: <span class="json-number">39.9062</span>,
      <span class="json-key">"lng"</span>: <span class="json-number">116.4085</span>,
      <span class="json-key">"summary"</span>: <span class="json-string">"学校历史"</span>,
      <span class="json-key">"details"</span>: <span class="json-string">"展示学校发展历程"</span>,
      <span class="json-key">"media"</span>: [
        <span class="json-string">"static/media/history.jpg"</span>
      ]
    }
  ]
}
            </div>
        </div>
    </div>

    <div class="card mb-4 api-section" id="create-route">
        <div class="card-header">
            <h5 class="mb-0">创建路径</h5>
        </div>
        <div class="card-body">
            <div class="d-flex align-items-center mb-3">
                <span class="method method-post">POST</span>
                <div class="endpoint">/api/routes</div>
            </div>

            <h6>描述</h6>
            <p>创建一个新的路径。</p>

            <h6>请求体</h6>
            <div class="code-block">
{
  <span class="json-key">"name"</span>: <span class="json-string">"文化之旅"</span>,
  <span class="json-key">"landmarks"</span>: [
    <span class="json-number">1</span>,
    <span class="json-number">2</span>,
    <span class="json-number">3</span>
  ]
}
            </div>

            <h6>响应</h6>
            <div class="code-block">
{
  <span class="json-key">"id"</span>: <span class="json-number">1</span>,
  <span class="json-key">"name"</span>: <span class="json-string">"文化之旅"</span>,
  <span class="json-key">"landmarks"</span>: [
    <span class="json-number">1</span>,
    <span class="json-number">2</span>,
    <span class="json-number">3</span>
  ]
}
            </div>
        </div>
    </div>

    <div class="card mb-4 api-section" id="update-route">
        <div class="card-header">
            <h5 class="mb-0">更新路径</h5>
        </div>
        <div class="card-body">
            <div class="d-flex align-items-center mb-3">
                <span class="method method-put">PUT</span>
                <div class="endpoint">/api/routes/{id}</div>
            </div>

            <h6>描述</h6>
            <p>更新指定的路径信息。</p>

            <h6>参数</h6>
            <table class="table parameter-table">
                <thead>
                    <tr>
                        <th>参数名</th>
                        <th>位置</th>
                        <th>类型</th>
                        <th>必需</th>
                        <th>描述</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>id</td>
                        <td>路径</td>
                        <td>整数</td>
                        <td>是</td>
                        <td>路径ID</td>
                    </tr>
                </tbody>
            </table>

            <h6>请求体</h6>
            <div class="code-block">
{
  <span class="json-key">"name"</span>: <span class="json-string">"文化之旅（更新）"</span>,
  <span class="json-key">"landmarks"</span>: [
    <span class="json-number">1</span>,
    <span class="json-number">2</span>,
    <span class="json-number">3</span>
  ]
}
            </div>

            <h6>响应</h6>
            <div class="code-block">
{
  <span class="json-key">"id"</span>: <span class="json-number">1</span>,
  <span class="json-key">"name"</span>: <span class="json-string">"文化之旅（更新）"</span>,
  <span class="json-key">"landmarks"</span>: [
    <span class="json-number">1</span>,
    <span class="json-number">2</span>,
    <span class="json-number">3</span>
  ]
}
            </div>
        </div>
    </div>

    <div class="card mb-4 api-section" id="delete-route">
        <div class="card-header">
            <h5 class="mb-0">删除路径</h5>
        </div>
        <div class="card-body">
            <div class="d-flex align-items-center mb-3">
                <span class="method method-delete">DELETE</span>
                <div class="endpoint">/api/routes/{id}</div>
            </div>

            <h6>描述</h6>
            <p>删除指定的路径。</p>

            <h6>参数</h6>
            <table class="table parameter-table">
                <thead>
                    <tr>
                        <th>参数名</th>
                        <th>位置</th>
                        <th>类型</th>
                        <th>必需</th>
                        <th>描述</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>id</td>
                        <td>路径</td>
                        <td>整数</td>
                        <td>是</td>
                        <td>路径ID</td>
                    </tr>
                </tbody>
            </table>

            <h6>响应</h6>
            <div class="code-block">
{
  <span class="json-key">"message"</span>: <span class="json-string">"路径已删除"</span>
}
            </div>
        </div>
    </div>

    <!-- 文件接口 -->
    <div class="card mb-4 api-section" id="upload-file">
        <div class="card-header">
            <h5 class="mb-0">上传文件</h5>
        </div>
        <div class="card-body">
            <div class="d-flex align-items-center mb-3">
                <span class="method method-post">POST</span>
                <div class="endpoint">/api/upload</div>
            </div>

            <h6>描述</h6>
            <p>上传媒体文件，支持图片格式。</p>

            <h6>请求体</h6>
            <p>multipart/form-data格式，包含一个file字段。</p>

            <h6>响应</h6>
            <div class="code-block">
{
  <span class="json-key">"filename"</span>: <span class="json-string">"uuid.jpg"</span>,
  <span class="json-key">"path"</span>: <span class="json-string">"static/media/uuid.jpg"</span>
}
            </div>
        </div>
    </div>

    <!-- 静态文件访问 -->
    <div class="card mb-4 api-section" id="static-files">
        <div class="card-header">
            <h5 class="mb-0">静态文件访问</h5>
        </div>
        <div class="card-body">
            <div class="d-flex align-items-center mb-3">
                <span class="method method-get">GET</span>
                <div class="endpoint">/static/media/{filename}</div>
            </div>

            <h6>描述</h6>
            <p>访问上传的媒体文件，如图片等。所有上传的文件都可以通过此接口访问。</p>

            <h6>参数</h6>
            <table class="table parameter-table">
                <thead>
                    <tr>
                        <th>参数名</th>
                        <th>位置</th>
                        <th>类型</th>
                        <th>必需</th>
                        <th>描述</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>filename</td>
                        <td>路径</td>
                        <td>字符串</td>
                        <td>是</td>
                        <td>文件名，包括扩展名</td>
                    </tr>
                </tbody>
            </table>

            <h6>示例</h6>
            <p>访问名为 <code>cf2f7cee-09c7-4b0d-839e-49af22497cf7.gif</code> 的图片：</p>
            <div class="code-block">
GET /static/media/cf2f7cee-09c7-4b0d-839e-49af22497cf7.gif
            </div>

            <h6>响应</h6>
            <p>直接返回文件内容，Content-Type根据文件类型自动设置。</p>

            <h6 class="mt-4">使用场景</h6>
            <p>此接口主要用于在前端显示上传的图片。地标和路径数据中的media字段包含的是相对路径，前端可以通过拼接基础URL和这些路径来显示图片。</p>
            <div class="code-block">
// 前端使用示例
<img src="/static/media/cf2f7cee-09c7-4b0d-839e-49af22497cf7.gif" alt="地标图片">
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    // 移动端侧边栏切换
    document.getElementById('mobile-menu-btn').addEventListener('click', function() {
        document.getElementById('api-sidebar').classList.toggle('show');
    });

    // 点击内容区域时，在移动端关闭侧边栏
    document.querySelector('.api-content').addEventListener('click', function() {
        if (window.innerWidth < 768) {
            document.getElementById('api-sidebar').classList.remove('show');
        }
    });

    // 导航滚动高亮
    const sections = document.querySelectorAll('.api-section');
    const navLinks = document.querySelectorAll('.api-sidebar .nav-link');

    function highlightNav() {
        const scrollPosition = window.scrollY + 100;

        sections.forEach(section => {
            const top = section.offsetTop;
            const height = section.offsetHeight;
            const id = section.getAttribute('id');

            if (scrollPosition >= top && scrollPosition < top + height) {
                navLinks.forEach(link => {
                    link.classList.remove('active');
                    if (link.getAttribute('href') === `#${id}`) {
                        link.classList.add('active');
                    }
                });
            }
        });
    }

    window.addEventListener('scroll', highlightNav);
    window.addEventListener('load', highlightNav);

    // 平滑滚动
    navLinks.forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            const targetId = this.getAttribute('href').substring(1);
            const targetElement = document.getElementById(targetId);

            if (targetElement) {
                window.scrollTo({
                    top: targetElement.offsetTop - 60,
                    behavior: 'smooth'
                });

                // 在移动端点击后关闭侧边栏
                if (window.innerWidth < 768) {
                    document.getElementById('api-sidebar').classList.remove('show');
                }
            }
        });
    });
</script>
{% endblock %}
